<template>
    <h1>我是 APP 组件</h1>

    <h1>$store.state.num: {{ $store.state.num }}</h1>
    <h1>mapState 简化: {{ num }}</h1>

    <button @click="setNum">修改 num 的值 (错误版)</button>
    <button @click="setNum2">修改 num 的值 ($store.commit('addNum'))</button>
    <button @click="setNum3">修改 num 的值 (...mapMutations(['addNum']))</button>
</template>

<script>
// 1. 引入 mapMutations 辅助函数
import { mapState, mapMutations } from "vuex";

export default {
    data() {
        return {};
    },
    methods: {
        // 2. 结构 vuex 中 mutations 中的一些方法
        ...mapMutations(['addNum']),

        setNum() {
            // this.$store.state.num++
            // this.num++
        },

        setNum2 () {
            // console.log(this.$store)
            this.$store.commit('addNum')
        },

        setNum3 () {
            // 3. 结构 完成后, 我们可以直接通过 this.XXX 去调用 vuex 中 mutations 内的一些方法
            this.addNum()
        }
    },
    computed: {
        ...mapState(["num", "num3"]),
    },
};
</script>

<style></style>
